<template>
  <div class="timing">
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="用户账号">
            <el-input v-model="formInline.account" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="formInline.phone" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="部门">
            <el-select v-model="formInline.deptId" clearable placeholder="请选择">
              <el-option
                v-for="item in depList"
                :key="item.id"
                :label="item.deptName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button plain @click="()=>{
              page=1
              getUserList()
              }"><Icon type="ios-search" />查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />新增</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <httb ref="httbRef" 
    :btn-is-show="{'operate':true,'del':true,'update':true,'roleAdmin':true,'resetPas':true}" 
    :table-col="tabUserList" 
    :table-data="tableUserData" 
    @refresh="getUserList" 
    @roleDist="roleDist" 
    width="280"
    @deleteSelectData="deleteSelectData"/>
    <!-- 分页 -->
    <div style="text-align:right;margin-top:10px;">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <editdialog ref="editdialog" @refresh="getUserList" />

    <treedialog ref="treedialog" @editSaveUser="setUserRoleAddEdit" />
  </div>
</template>

<script>
import { getUserRoles, getUserList, userRoleAddEdit, getPostList, getDeptList,delUser } from '@/api/home_'

import editdialog from './components/editDialog.vue'
import treedialog from './components/tree.vue'

export default {
  components: {
    editdialog, treedialog
  },
  // primary  success info warning danger
  data() {
    return {
      depList: [],
      postList: [],
      userId: '',
      formInline: {
        account: '',
        phone: '',
        deptId: ''
      },
      tableUserData: [],
      tabUserList: [
        {
          key: 'account',
          title: '用户账号 '
        },
        {
          key: 'deptname',
          title: '部门'
        },
        {
          key: 'postname',
          title: '岗位名称'
        },
        {
          key: 'realName',
          title: '真实名称'
        },   {
          key: 'birthday',
          title: '生日'
        },
        {
          key: 'createTime',
          title: '创建时间'
        },
      ],
      visible: false,
      total: 0,
      size: 10,
      page: 1
    }
  },
  created() {
    getDeptList().then(res => {
      this.depList = res.data
    })
    getPostList({}).then(res => {
      this.postList = res.data
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.getUserList()
    })
  },
  methods: {
    deleteSelectData(v) {
      delUser(v.id).then(res => { 
        if (res.code == 200) {
          this.getUserList()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.msg
          })
        }
      })
    },
    roleDist(v) {
      this.getUserRolesList(JSON.parse(v).id)
    },
    // 用户角色列表
    getUserRolesList(v) {
      this.userId = v
      getUserRoles(v).then(res => {
        if (res.code == 200) {
          const list = res.data
          list.forEach((item, index) => {
            item.title = item.roleName
          })
          this.$refs.treedialog.show(JSON.stringify(list))
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 用户角色修改
    setUserRoleAddEdit(v) {
      userRoleAddEdit({
        roleIds: JSON.parse(v),
        userId: this.userId
      }).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg)
          this.$refs.treedialog.close()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    addUser(v) {
      this.$refs.editdialog.setVal(v, this.depList, this.postList)
    },
    editRowData(v) {
      this.$refs.editdialog.setVal(v, this.depList, this.postList)
    },
    handleSizeChange(v) {
      this.page = 1
      this.size = v
      this.getUserList()
    },
    handleCurrentChange(v) {
      this.page = v
      this.getUserList()
    },

    // 获取用户列表
    getUserList() {
      getUserList({
          page: this.page,
          size: this.size,
          account: this.formInline.account,
          phone: this.formInline.phone,
          deptId: this.formInline.deptId
      }).then(res => {
        this.tableUserData = res.data.records
        this.total = res.data.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .timing{
    background:#fff;
    padding:20px;
  }
</style>
